<template>
  <div class="container">
    <el-form
      :model="updateArticleForm"
      :rules="updateArticleFormRules"
      label-width="100px"
      ref="updateArticleFormRef"
    >
      <el-form-item label="文章标题" prop="title">
        <el-input
          placeholder="请输入文章标题"
          v-model.trim="updateArticleForm.title"
        ></el-input>
      </el-form-item>

      <el-form-item label="文章内容" prop="articleBody">
        <quill-editor
          v-model="updateArticleForm.articleBody"
          :options="editorOption"
          style="height: 200px"
        ></quill-editor>
      </el-form-item>

      <el-row>
        <el-col>
          <el-form-item label="视频地址" prop="videoURL" class="videoURL">
            <el-input
              placeholder="请输入视频"
              v-model.trim="updateArticleForm.videoURL"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item class="operationBtn">
        <el-button type="primary" @click="updateArticles">确 定</el-button>
        <el-button @click="$emit('close', false)">取 消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 导入 api
import { update } from '@/api/hmmm/articles'
export default {
  name: 'articles-update',
  components: {},
  props: {
    dataItem: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      updateArticleForm: {
        title: this.dataItem.title,
        articleBody: this.dataItem.articleBody,
        videoURL: this.dataItem.videoURL
      },
      updateArticleFormRules: {
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        articleBody: [
          { required: true, message: '请输入文章内容', trigger: 'blur' }
        ]
      },

      // 富文本编辑器配置项
      editorOption: {
        placeholder: '请输入内容',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            [{ list: 'ordered' }, { list: 'bullet' }], // 列表
            ['blockquote', 'code-block'], // 引用，代码块
            ['link'],
            ['image'] // 上传图片、上传视频
          ]
        }
      }
    }
  },
  created () {},
  mounted () {},
  methods: {
    // 修改文章
    updateArticles () {
      this.$refs.updateArticleFormRef.validate(async (valid) => {
        if (valid) {
          this.dataItem.title = this.updateArticleForm.title
          this.dataItem.articleBody = this.updateArticleForm.articleBody
          this.dataItem.videoURL = this.updateArticleForm.videoURL

          try {
            await update(this.dataItem)
            this.$emit('close', false)
            this.$emit('update')
            this.$message.success('修改成功')
          } catch (error) {
            console.log(error)
            this.$message('修改失败')
          }
        } else {
          this.$message('数据验证失败')
        }
      })
    }
  },
  computed: {},
  watch: {},
  filters: {}
}
</script>

<style lang="scss" scoped>
.quill-editor {
  margin-bottom: 20px;
}
.videoURL {
  margin: 45px 0;
}
.operationBtn {
  button {
    float: right;
    margin-right: 10px;
  }
}
</style>
